<!--suppress ALL -->
<template>
  <div class="main-Home">
    <div class="content">
      <img class="content-image"
           :src=showBackground
           alt="74845ebd1c3b2a06d377c310aaea582e.jpg"
      />
      <div class="opacity">
        <el-button class="headPortrait" @click="login"><img
          :src=showAvatar
          border="1" style="background-size: contain"
        /></el-button>
        <span style="font-size: 20px;"><span
          class="avatarFont" style="color: #000000"
        >{{ name }}
          </span></span>
        <div class="avatarFont-one"><b><span style="font-size: 24px;"><span
          style="color: rgb(255, 192, 1);"
        ></span></span><span
          style="font-size: 20px;"
        ><span style="color: rgb(255, 192, 1);"></span><span style=""><span
          style="color: rgb(255, 192, 1);"
        >—</span><span
          style="color: rgb(255, 192, 1);"
        >—</span></span></span></b><span
          style="color: rgb(255, 192, 1); font-size: 24px;"
        ></span></div>
        <div class="avatarFont-two"><span style="color: #444444; "><span style="font-size: 14px;"><span
          style="color: rgb(78,64,64);"
        >{{ manifesto }}</span></span></span>
        </div>
      </div>
      <div class="jump">
        <el-menu
          mode="horizontal"
          background-color="#98a7a7"
          text-color="#ffffff"
          active-text-color="#6300f5"
          :router="true"
        >
          <el-menu-item class="el-menu-items" index="/Homepage" @click="changePicture(1)"><i
            style="color: #1e1e1e">主页</i></el-menu-item>
          <el-menu-item class="el-menu-items" index="/journal" @click="changePicture(2)"><i
            style="color: #1e1e1e">日志</i></el-menu-item>
          <el-menu-item class="el-menu-items" index="/photoAlbum" @click="changePicture(3)"><i
            style="color: #1e1e1e">相册</i>
          </el-menu-item>
          <el-menu-item class="el-menu-items" index="/personalInformation" @click="changePicture(4)"><i
            style="color: #1e1e1e">个人档</i></el-menu-item>
          <el-menu-item class="el-menu-items" index="/share" @click="changePicture(5)"><i
            style="color: #1e1e1e">分享</i></el-menu-item>
        </el-menu>
      </div>
      <el-dialog
        title="发起动态"
        :visible.sync="centerDialogVisible"
        width="30%"
        center>
        <el-form :model="form">
          <el-form-item label="发布内容">
            <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入内容"
              v-model="form.content">
            </el-input>
          </el-form-item>
          <P>上传图片(最多上传九张图片)</P>

          <el-upload
            list-type="picture-card"
            class="avatar-uploader"
            ref="upload"
            :action= upload_url
            name="file"
            :multiple=true
            :headers="myHeaders"
            :auto-upload= true
            :http-request="updateimages"
          >
            <i slot="default" class="el-icon-plus"></i>
            <div slot="file" slot-scope="{file}">
              <img
                class="el-upload-list__item-thumbnail"
                :src="file.url" alt=""
              >
              <span class="el-upload-list__item-actions">
        <span
          class="el-upload-list__item-preview"
          @click="handlePictureCardPreview(file)"
        >
          <i class="el-icon-zoom-in"></i>
        </span>
        <span
          v-if="!disabled"
          class="el-upload-list__item-delete"
          @click="handleRemove(file)"
        >
          <i class="el-icon-delete"></i>
        </span>
      </span>
            </div>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </el-form>
        <span slot="footer" class="dialog-footer">
    <el-button @click="centerDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="update()">发 出</el-button>
  </span>
      </el-dialog>
      <!--主体部分-->
      <el-main class="mainBody">
        <router-view></router-view>
      </el-main>
      <el-button @click="centerDialogVisible = true" :style="{ display: '' }" type="primary"
                 class="button-Homepage">+
      </el-button>
    </div>

  </div>

</template>

<script>
import {loadBackgroundImage, loadHomePageInformation, uploadDynamicPictureLeaflet, removeTokenhome} from '@/api/home'
import {getToken, removeToken} from "@/utils/auth";

export default {

  inheritAttrs: false,
  components: {},
  props: [],
  name: 'Home',
  data() {
    //发送动态隐藏
    status:'none';
    var importHeaders = localStorage.getItem('token') // 要保证取到
    return {
      //上传URL
      upload_url: 'dev-api/Home/Message/updetImage',
      //删除的url
      upload_name: '',//图片或视频名称
      ad_url: '',//上传后的图片或视频URL
      ad_url_list: [],//预览列表
      myHeaders: {
        Authorization: 'Bearer '+getToken()
      },
      importHeaders: '',
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,
      form: {
        content: '',
        contentImages: '',
      },
      formData: {
        field101: undefined,
      },
      rules: {
        field101: [{
          required: true,
          message: '请输入内容',
          trigger: 'blur'
        }],
      },
      //按钮隐藏
      display: 'none',
      centerDialogVisible: false,
      // 昵称
      name: '',
      // 个人宣言
      manifesto: '',
      // 背景
      showBackground: '',
      // 头像
      showAvatar: '',
      // 主页背景
      backgroundImage: '',
      // 主页头像
      headPortrait: '',
      // 日志背景
      backgroundImage_journal: '',
      // 日志头像
      headPortrait_journal: '',
      // 相册背景
      backgroundImage_photoAlbum: '',
      // 相册头像
      headPortrait_photoAlbum: '',
      //个人档背景
      backgroundImage_personalFile: '',
      //个人档头像
      headPortrait_personalFile: '',
      // 分享背景
      backgroundImage_share: '',
      // 分享头像
      headPortrait_share: '',
      //登录页背景
      loginPageAvatar: '',
      //登录页头像
      loginPageBackground: ''
    };
  },
  // 在这里调用ajax请求方法 第二个生命周期函数 在 created 中，data 和 methods 都已经被初始化好了！
  // 如果要调用 methods 中的方法，或者操作 data 中的数据，最早，只能在 created 中操作
  created() {
    this.loadBackgroundImage();
    this.loadHomePageInformation();
    this.whetherToLogIn();
  },
  methods: {
    //上传完成后
    upload_success(res) {
      console.log('上传完成后' + JSON.stringify(res))
      if (res.code === 200) {
        console.log(res.datas)
        this.$message.success("上传成功")
      } else if (res.code === 401) {
        this.$message.error("登录过期:" + res.msg + ' 请重新登录')
        removeToken()
        this.centerDialogVisible = false
        this.display = 'none'
        this.ad_url_list = []
      } else {
        this.$message.error("上传错误:" + res.msg)
        this.centerDialogVisible = false
        this.ad_url_list = []
      }
    },
    //上传图片
    updateimages(params) {
      uploadDynamicPictureLeaflet(params.file).then(res => {
        if (res.code===200){
          this.$message.success(res.msg)
          this.ad_url_list.push(res.data)
          console.log(this.ad_url_list)
        } else if (res.code === 401) {
          this.$message.error("登录过期:" + res.msg + ' 请重新登录')
          removeToken()
          this.centerDialogVisible = false
          this.display = 'none'
          this.ad_url_list = []
        } else {
          this.$message.error("上传错误:" + res.msg)
          this.centerDialogVisible = false
          this.ad_url_list = []
        }
      })
      return false // 返回false不会自动上传
    },
    //发起动态
    update() {
      this.centerDialogVisible = false
    },
    //
    handleRemove(file) {
      console.log(file);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleDownload(file) {
      console.log(file);
    },
    maximumNumberOfPictures() {
      this.$message.error('上传文件超过上限');

    },
    onClose() {
      this.$refs['elForm'].resetFields()
    },
    close() {
      this.$emit('update:visible', false)
    },
    handelConfirm() {
      this.$refs['elForm'].validate(valid => {
        if (!valid) return
        this.close()
      })
    },
    modifyStatus() {
      setTimeout(() => {
        this.$refs.homepage.modifyStatus(); //child1是写在子组件上的属性 showSure()是子组件的方法名
      }, 5);
    },

    //检查是否登录
    whetherToLogIn() {
      var token = getToken();
      if (token != '' && token != null) {
        this.display = ''
      }
    },
    //更换主页背景图片
    changePicture(int) {
      if (int === 1) {
        this.showBackground = this.backgroundImage
        this.showAvatar = this.headPortrait

      }
      if (int == 2) {
        this.showBackground = this.backgroundImage_journal
        this.showAvatar = this.headPortrait_journal
      }
      if (int === 3) {
        this.showBackground = this.backgroundImage_photoAlbum
        this.showAvatar = this.headPortrait_photoAlbum
      }
      if (int === 4) {
        this.showBackground = this.backgroundImage_personalFile
        this.showAvatar = this.headPortrait_personalFile
      }
      if (int === 5) {
        this.showBackground = this.backgroundImage_share
        this.showAvatar = this.headPortrait_share
      }
    },

    //加载背景图片
    loadBackgroundImage() {
      loadBackgroundImage().then(res => {
        console.log(res)
        this.showBackground = res.data.backgroundImage
        this.showAvatar = res.data.headPortrait
        this.backgroundImage = res.data.backgroundImage
        this.headPortrait = res.data.headPortrait
        this.backgroundImage_journal = res.data.backgroundImage_journal
        this.headPortrait_journal = res.data.headPortrait_journal
        this.backgroundImage_photoAlbum = res.data.backgroundImage_photoAlbum
        this.headPortrait_photoAlbum = res.data.headPortrait_photoAlbum
        this.backgroundImage_personalFile = res.data.backgroundImage_personalFile
        this.headPortrait_personalFile = res.data.headPortrait_personalFile
        this.backgroundImage_share = res.data.backgroundImage_share
        this.headPortrait_share = res.data.headPortrait_share
        this.loginPageAvatar = res.data.loginPageAvatar
        this.loginPageBackground = res.data.loginPageBackground
      })
    },
    //获取主页信息
    loadHomePageInformation() {
      console.log("进入方法")
      loadHomePageInformation().then(res => {
        console.log(res)
        this.name = res.data.head_name
        this.manifesto = res.data.personalDeclaration
      })
    },

    //跳转到登录后台页面
    login() {
      //跳转到上一次浏览的页面  this.$router.go(-1)
      // this.$router.go(-1)

      //指定跳转的地址 this.$router.replace('/menu')
      // this.$router.replace('/login')

      //指定跳转的地址 this.$router.replace('/menu')
      this.$router.replace({

        name: 'login', params: {
          loginPageBackground: this.loginPageBackground,
          loginPageAvatar: this.loginPageAvatar
        }
      })

      //指定跳转的路由的名字下 this.$router.replace({name:'menu'})
      // this.$router.replace({name:'menu'})

      //通过push进行跳转
      // this.$router.push('/menu')
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
//主页面整体div
.main-Home {
  width: 100%;
  height: 100%;
  background-color: #98e8b9;
}

//主体部分
.mainBody {
  width: 100%;
  height: 930px;
  background-color: #e4cef8;
  //位置 absolute 绝对位置
  position: relative;
  //距离左边
  left: 50%;
  //坐标位置
  transform: translate(-50%, 0%);
}

//按钮样式
.el-menu-items {
  width: 17%;
  text-align: center;
}

//跳转div
.jump {
  z-index: 4;
  width: 70%;
  height: 10%;
  //位置 absolute 绝对位置
  position: absolute;
  //距离左边
  left: 15%;
  //坐标位置
  bottom: 0%;
}


//图片div
.content {
  width: 100%;
  height: 70%;
  position: absolute;
  //头部背景图片
  .content-image {
    width: 100%;
    height: 100%;
  }

  //不透明的部分
  .opacity {
    width: 100%;
    height: 40%;
    //不透明度
    background: rgba(255, 255, 255, 0.3);
    margin-top: 1%;
    //位置 absolute 绝对位置
    position: absolute;
    top: 13%;
    /*头像*/
    .headPortrait {
      z-index: 2;
      opacity: 100%;
      text-align: center;
      height: 60px;
      width: 65px;
      //与边框的间距
      padding: 1px;
      //边界线 颜色
      border: 0px solid #000000;
      //圆角边界线
      border-radius: 50%;
      //边影
      box-shadow: 0 0 10px #000000;
      //位置 absolute 绝对位置
      position: relative;
      //距离左边
      transform: translate(100%, -50%);
      //背景
      background-color: #000000;
      //图片
      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background-color: #acded3;
      }
    }
  }

  //字体div
  .avatarFont {
    //设置div在最上层
    z-index: 2;
    height: 20%;
    width: 50%;
    //位置 absolute 绝对位置
    position: absolute;
    font-size: 35px;
    //距离左边
    left: 25%;
    margin-top: 2%;
    text-align: center;
  }

  //字体div2
  .avatarFont-one {
    //设置div在最上层
    z-index: 2;
    height: 20%;
    width: 20%;
    position: absolute;
    //距离左边
    left: 40%;
    margin-top: 1%;
    text-align: center;
  }

  //字体div3
  .avatarFont-two {
    width: 50%;
    height: 20%;
    //位置 absolute 绝对位置
    position: relative;
    //距离左边
    left: 25%;
    margin-top: 4%;
    text-align: center;
  }
}

.button-Homepage {
  position: fixed;
  right: 5%;
  bottom: 5%;
  opacity: 0.7;
}
</style>
